<template>
	<view class="cflex-c" style="justify-content: center;align-items: center;">
		<view class="u-m-t-20" style="background-color: #FFFFFF;border-radius: 15rpx;width: 90%;padding: 30rpx 15rpx 30rpx 15rpx;">
			<view style="color: #354F60;">
				<u-input v-model="feedback" type="textarea" :fixed="true" :auto-height="true" maxlength="150"
					placeholder="请输入您的反馈，我们将不断为您改进，已经核实的将尽快联系您"
					placeholder-style="font-size:13px;text-align: left;color:#AAAAAA" />
			</view>
			<view class="cflex-r u-p-t-10 u-p-b-10 u-m-t-50">
				<!-- 显示图片 -->
				<view v-show="imgSrc" v-for="(item,index) in imgArr" :key="index" class="cflex-r" style="align-items: center;position: relative;">
					<image mode="aspectFill" style="width: 100rpx;height: 100rpx;margin-right: 20rpx;" :src="item" @click="preview(item,index)"></image>
					<image src="../../static/my/del.png" style="width: 25rpx;height: 25rpx;position: absolute;top: -10rpx;right: 10rpx;" @tap="delImage(index)"></image>
				</view>
				<!-- 选择图片 -->
				<view style="border:1px dashed #AAAAAA;border-radius: 5px;height: 48px;background-color: #EEEEEE;" v-show="addPic">
					<image @tap="chooseImage()" style="height: 26px;width: 28px;padding: 10px;" src="../../static/my/unPicture.png">
					</image>
				</view>
				<!-- 选择视频 -->
				<!-- <view style="margin-left:15px;border:1px dashed #AAAAAA;border-radius: 5px;height: 48px;background-color: #EEEEEE;">
					<image @tap="chooseVideo()" style="height: 23px;width:38px;padding: 12px 5px;" src="../../static/my/unVideo.png">
					</image>
				</view> -->
			</view>
			<view class="u-p-t-15" style="color: #354F60;">
				<view class="cflex-r u-font-10" style="align-items:center;width: 100%;color: #AAAAAA;">
					<!-- ※最多只能上传3张图片、1个视频（小于20M、15秒以内） -->
					※最多只能上传3张图片（小于20M）
				</view>
			</view>
		</view>
		<view class="u-m-t-20" style="background-color: #FFFFFF;border-radius: 15rpx;width: 90%;padding: 20rpx 15rpx;">
			<input v-model="phone" type="number" placeholder="请填写你的邮箱或手机号 (任选一个)" />
		</view>
		<view class="cflex-r u-m-t-20 u-p-t-25 u-p-b-25" style="justify-content: center;align-items: center;background-color: #4578F7;border-radius: 15rpx;width: 90%;color: #333333;font-weight: bold;" @tap="tiJiao()">提交反馈</view>
		<view>
			<u-modal v-model="show" :content="content" @confirm="agree()"></u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addPic: true,
				imgArr: [], //存放图片数组
				imgSrc: false,
				picnote:'',
				feedback: '',
				phone: '',
				show: false,
				content: '您的意见我们已经收到了，会尽快回复您的'
			}
		},
		onLoad() {
		
		},
		onShow() {
			
		},
		computed:{},
		methods:{
			chooseImage(){
				let that = this;
				uni.chooseImage({
				    count: 6, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success: function (res) {
						// // //console.log(res);
						if(that.imgArr.length<3){
							that.imgArr = [...that.imgArr,...res.tempFilePaths];
						}
						if(that.imgArr.length==3){
							that.addPic = false
						}
						if(that.imgArr!=''){
							that.imgSrc = true
						}
				    }
				});
			},
			chooseVideo(){
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function (res) {
						 //console.log(res);
					}
				});
			},
			// 点击删除图片
			delImage(index){
				let that = this
				that.imgArr.splice(index,1);
				that.addPic = true;
			},
			// 点击图片进行预览
			preview(img,index) {
				// // //console.log(img,index);
				 //console.log('预览')
				// 新建一个存放预览图片的空数组
				var imgArr = []
				imgArr.push(img);
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							 //console.log(data);
							 //console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (index + 1) + '张图片');
						},
						fail: function(err) {
							 //console.log(err.errMsg);
						}
					}
				});
			},
			upImg(i){
				return new Promise((resolve,rejuct)=>{
					uni.uploadFile({
						url: this.$store.state.baseUrl + "common/up/single",
						filePath: this.imgArr[i],
						name: 'file',
						formData: {
							imgPath: this.imgArr[i],
						},
						success(res1) {
							resolve(res1)
						},
						fail(err){
							 //console.log(err);
						}
					})
				})
			},
			async tiJiao(){
				let val = this.feedback;
				let phone = this.phone;
				if(val==''){
					uni.showToast({
						icon:"none",
					    title: '反馈内容不能为空',
					    duration: 2000
					});
					return;
				}
				
				 //console.log(this.imgArr);
				uni.showLoading({
					title:'提交中'
				});
				for(var i=0;i<this.imgArr.length;i++){
					// // //console.log(i);
					let upRes=await this.upImg(i);
					let upRes3 = JSON.parse(upRes.data).url;
					this.picnote += upRes3+',';
					 //console.log("up",upRes3);
				}

				// 将解析出来的msg地址放入picnote中
				let picnoteItem =  this.picnote.substr(0,this.picnote.length-1);
				 //console.log("==================>",picnoteItem,"====");
				this.$request("kehu/other/fanKui",{tel:phone,content:val,urls:picnoteItem},'POST','json').then(res=>{
					 //console.log(res);
					if(res.code==0){
						this.feedback = '';
						this.phone = '';
						this.show = true;
						uni.hideLoading();
					}
				})
				
			},
			agree(){
				uni.reLaunch({
					url:'../../pages/tab4'
				})
			}
		}
	}
</script>

<style>
</style>
